<template>
  <div class="profile_page">
    <CommonHeader :title="isLogin ? '账号信息' : '未登录'" />
    <div class="profile_content page_no_tab_bar">
      <!-- 未登录 -->
      <div class="ordinary_user" v-if="!isLogin">
        <!-- 未登录提醒 -->
        <div class="wel_notice">
          <div class="profile_img">
            <img src="@/assets/profile/user_img.png" alt="" />
          </div>
          <div class="wel_box">
            <div class="wel_text">欢迎来到 FSA Coin</div>
            <div class="font_color">请登录您的账户或注册一个账号</div>
          </div>
        </div>
        <!-- 登录注册按钮 -->
        <div class="opt_btns">
          <div class="login_btn" @click="goPage('login')">登录</div>
          <div class="register_btn" @click="goPage('register')">注册</div>
        </div>
      </div>
      <!-- 已登录 -->
      <div class="auth_user" v-else>
        <!-- 头像信息 -->
        <div class="avatar_info">
          <div class="left" @click="goPage('/profile/updateInfo')">
            <img :src="userInfo.avatar" alt="" />
          </div>
          <div class="center">
            <div class="user_name">{{ userInfo.userName }}</div>
            <div class="user_code font_color">
              <span>{{ userInfo.inviteCode }}</span>
              <img
                @click="copyContent(userInfo.inviteCode)"
                src="@/assets/profile/copy_icon.png"
                alt=""
              />
            </div>
          </div>
          <div class="right" @click="goPage('/profile/updateInfo')">
            <img src="@/assets/common/go_icon.png" alt="" />
          </div>
        </div>
        <!-- 常用功能 -->
        <div>常用功能</div>
        <ul class="common_func">
          <li
            v-for="(item, index) in oftenFunsList"
            :key="index"
            @click="goPage(item.path)"
          >
            <img :src="item.icon" alt="" />
            <div>{{ item.text }}</div>
          </li>
        </ul>
      </div>
      <!-- 其他功能 -->
      <div v-if="isLogin">其他功能</div>
      <ul class="other_funs">
        <li
          v-for="(item, index) in otherFunsList"
          :key="index"
          @click="goPage(item.path)"
        >
          <div class="left">
            <img :src="item.icon" alt="" />
            <span>{{ item.text }}</span>
          </div>
          <div class="right">
            <img src="@/assets/common/go_icon.png" alt="" />
          </div>
        </li>
      </ul>
      <!-- 退出登录按钮 -->
      <div class="operate_btn" @click="goPage('/home')" v-if="isLogin">
        退出登录
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import { useRouter } from "vue-router";
import TransferIcon from "@/assets/profile/transfer_icon.png";
import WithdrawIcon from "@/assets/profile/withdraw_icon.png";
import DepositIcon from "@/assets/profile/deposit_icon.png";
import ExchangeIcon from "@/assets/profile/exchange_icon.png";
import SettingsIcon from "@/assets/profile/settings_icon.png";
import AuthIcon from "@/assets/profile/auth_icon.png";
import InviteIcon from "@/assets/profile/invite_icon.png";
import SecurityIcon from "@/assets/profile/security_icon.png";
import HelpIcon from "@/assets/profile/help_icon.png";
import SwitchIcon from "@/assets/profile/switch_icon.png";
import DownloadIcon from "@/assets/profile/download_icon.png";
import { ElMessage } from "element-plus";
import { getProfile, logout } from "@/api/user";

// 获取路由对象
const router = useRouter();
// 是否为登陆状态
const isLogin = ref(false);
// 用户信息
const userInfo: any = ref({
  avatar: "",
  inviteCode: "",
  userName: "",
});
// 常用功能列表
const oftenFunsList: any = ref([
  { text: "转账", icon: TransferIcon, path: "/assets/transfer" },
  { text: "提现", icon: WithdrawIcon, path: "/assets/withdraw" },
  { text: "充值", icon: DepositIcon, path: "/assets/recharge" },
  { text: "闪兑", icon: ExchangeIcon, path: "/assets/exchange" },
]);

// 其他功能列表
const otherFunsList: any = ref([
  { text: "设置", icon: SettingsIcon, path: "/profile/settings" },
  { text: "身份认证", icon: AuthIcon },
  { text: "邀请好友", icon: InviteIcon, path: "/profile/invite" },
  { text: "账户安全", icon: SecurityIcon, path: "/profile/security" },
  { text: "帮助中心", icon: HelpIcon, path: "/profile/help" },
  { text: "切换账号", icon: SwitchIcon, path: "/profile/account" },
  { text: "下载app", icon: DownloadIcon },
]);

// 复制输入框内容
const copyContent = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text);
    ElMessage.success("复制成功！");
  } catch (err) {
    ElMessage.error("复制失败！");
  }
};

// 跳转指定页
const goPage = (path: string) => {
  if (!path) return ElMessage.warning("暂未开放！");

  switch (path) {
    // 退出登录
    case "/home":
      logout({}).then((res: any) => {
        localStorage.removeItem("token");
        router.push(path);
      });
      break;

    default:
      router.push(path);
      break;
  }
};

// 获取个人信息
const getInfo = () => {
  getProfile().then((res: any) => {
    userInfo.value = res.data;
  });
};

// 初始化数据
onMounted(() => {
  let token = localStorage.getItem("token");
  if (token) {
    isLogin.value = true;
    getInfo();
  } else {
    isLogin.value = false;
  }
});
</script>

<style lang="scss" scoped>
.profile_page {
  .profile_content {
    padding-top: 10px;
    .ordinary_user {
      .wel_notice {
        display: flex;
        padding: 10px 0;
        align-items: center;
        .profile_img {
          display: flex;
          align-items: center;
          margin-right: 15px;
        }
        .wel_box {
          flex: 1;
          .wel_text {
            font-size: 20px;
          }
          .font_color {
            font-size: 14px;
          }
        }
      }
      .opt_btns {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        div {
          width: 45vw;
          text-align: center;
          padding: 10px 0;
          border-radius: 10px;
        }
        .login_btn {
          background-color: #141515;
        }
        .register_btn {
          background: linear-gradient(to right, #14da62, #0d5eae);
        }
      }
    }
    .auth_user {
      .avatar_info {
        margin-bottom: 20px;
        display: flex;
        padding: 5px 0;
        justify-content: space-between;
        align-items: center;
        .left {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .center {
          flex: 1;
          margin: 5px 10px;
          .user_name {
            font-size: 20px;
            margin-bottom: 10px;
          }
          .user_code {
            display: flex;
            span {
              margin-right: 5px;
              font-size: 14px;
            }
          }
        }
        .right {
          width: 30px;
          text-align: right;
        }
      }
      .common_func {
        margin-top: 10px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #babcbf;
        background-color: #141515;
        border-radius: 10px;
        padding: 10px 0;
        li {
          flex: 1;
          text-align: center;
        }
      }
    }
    .other_funs {
      margin-top: 10px;
      li {
        padding: 15px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;
        color: #babcbf;
        & > .left {
          display: flex;
          align-items: center;
          span {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
